<template>
  <div class="input" v-show="ShowArrays[0]">
    <el-row class="input-containter">
      <!-- <el-col :span="8" class="input-text">
                <div class="sub-title">档案号查询:</div>
            </el-col> -->
      <el-col :span="10">
        <el-autocomplete
          size=""
          class="inline-input"
          v-model="state2"
          :fetch-suggestions="querySearch"
          placeholder="请输入许可证号"
          :trigger-on-focus="false"
          @select="handleSelect"
        >
          <template slot="append">
            查询
          </template>
        </el-autocomplete>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";
import { mapGoTo } from "../map/mapHandle";
import { productorIP } from "../map/mapconfig";
export default {
  data() {
    return {
      state2: ""
    };
  },
  methods: {
    querySearch(queryString, cb) {
      let val = queryString;
      window["val"] = val;
      axios({
        method: "GET",
        url: `${productorIP}/cnplan/getQjsgc?gcxkz=${val}`
      }).then(res => {
        let data = res.data;
        let resData = data.map((item, index) => {
          //let tmp = {};
          item.value = item.gcxkz;
          return item;
        });
        cb(resData);
      });
    },
    handleSelect(item) {
      //清除高亮
      window["view"].graphics.remove(window.polylineGraphic);
      let id = item.objid;
      let _this = this;
      axios({
        method: "GET",
        url: `${productorIP}/cnplan/getQjsgcById?id=${id}`
      }).then(res => {
        let result = JSON.parse(res.data.geom).coordinates[0];
        let x = result[0][0];
        let y = result[0][1];
        let QueryTask = window["QueryTask"];
        let Query = window["Query"];
        var queryTask = new QueryTask({
          url:
            "http://10.89.5.191/OneMapServer/rest/services/cn_jsgc/MapServer/0"
        });

        var val = window["val"];
        var query = new Query();
        query.returnGeometry = true;
        query.outFields = ["*"];
        // query.where = "gcxkz='2009F0671'";
        query.where = "gcxkz='" + val + "'";

        queryTask.execute(query).then(function(results) {
          let geometry = results.features[0].geometry;
          //去生成高亮图形
          _this.queryGeometry(geometry);
          //去显示面板
          //去定位到当前位置
          mapGoTo(x, y,13);
        });
      });
    },
    queryGeometry(val) {
      let Graphic = window["Graphic"];
      //颜色样式
      var symbol = {
        type: "simple-fill", // autocasts as new SimpleFillSymbol()
        color: [81, 255, 255, 0.4],
        style: "solid",
        outline: {
          // autocasts as new SimpleLineSymbol()
          color: "#51FFFF",
          width: 1
        }
      };
      let geometry = val;
      var polylineAtt = {
        Name: "Keystone Pipeline",
        Owner: "TransCanada"
      };
      var polylineGraphic = new Graphic({
        geometry: geometry,
        symbol: symbol,
        attributes: polylineAtt
      });
      window.polylineGraphic = polylineGraphic;
      window["view"].graphics.add(polylineGraphic);
      // view.goto([-4082.95835768937 -1861.7787818436118]);
      // var options = {
      //     speedFactor: 0.1, // animation is 10 times slower than default
      //     easing: "out-quint" // easing function to slow down when reaching the target
      // };
    }
  },

  props: {
    showArrys: { type: Array }
  },
  computed: {
    ShowArrays() {
      return this.$props.showArrys;
    }
  }
};
</script>
<style scoped>
.input {
  position: fixed;
  top: 37.5%;
  left: 6%;
  /* background: pink; */
}
.input-containter {
  width: 240px;
  height: 40px;
  display: flex;
  /* background: red; */
}
.input-text {
  height: 40px;
  line-height: 40px;
  color: gray;
  font-size: 14px;
}
.inline-input {
  width: 300px;
  /* background: blue; */
}
</style>
